{% extends "base.html" %}

{% block title %}{{ room }}{% endblock %}

{% block extra_js %}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="{{ STATIC_URL|default:MEDIA_URL }}js/socket.io.js"></script>
<script>WEB_SOCKET_SWF_LOCATION="{{ STATIC_URL }}flashsocket/WebSocketMain.swf"; window.room = "{{ room.id }}"; window.game="{{ game.id }}"</script>
<script src="{{ STATIC_URL }}js/chat.js"></script>
{% endblock %}

{% block main %}

<div id="game">
    <h3>Clasificación</h3>
    <div id="players"></div>

    <br />
    <br />
    <br />
    <br />

    <h3>Mis Recursos</h3>
    <div id="resources"></div>


    <br />
    <br />
    <br />
    <br />

    <h3>Mis Hormigas</h3>
    <div id="ants"></div>
</div>


<br />
<br />
<br />
<br />

<div>
    <button onclick="JavaScript:new_ant('W');">Tipo1</button>
    <button onclick="JavaScript:new_ant('OD');">Tipo2</button>
    <button onclick="JavaScript:new_ant('OO');">Tipo3</button>
    <button onclick="JavaScript:new_ant('FD');">Tipo4</button>
    <button onclick="JavaScript:new_ant('FO');">Tipo5</button>
    <button onclick="JavaScript:new_ant('Q');">Tipo6</button>
</div>

<div id="chat">

    <div id="nickname">
        <form id="set-nickname" class="wrap">
            <p>Please type in your nickname and press enter.</p>
            <input id="nick">
            <p id="nickname-err">Nickname already in use</p>
        </form>
    </div>

    <div id="connecting">
        <div class="wrap">Connecting to socket.io server</div>
    </div>

    <div id="messages">
        <div id="nicknames"><span>Online:</span></div>
        <div id="lines"></div>
    </div>

    <form id="send-message">
        <input id="message">
        <button>Send</button>
    </form>
</div>
{% endblock %}
